<template>
  <div>
    vuex中的mutation传值
    <input type="text" v-model.number="num1" @change="changeLevel">
    <hr>
    <p>年龄：{{age}}</p>
    <p>年龄：{{$store.state.age}}</p>
    <p>组件自己的计算属性：{{getNewNum2}}</p>
    <p>mapGetters：{{getArr1Length11111}}</p>
    <button @click="olding">通过mapMutation修改年龄</button>
  </div>
</template>
<script>
// 从vuex中导入三个辅助函数，当成组件的一部分，可以避免总是写$store,
import  {mapState,mapGetters,mapMutations} from 'vuex'
export default {
  data() {
    return {
      num1: '',
      num2: 666
    }
  },
  computed:{
    getNewNum2() {
      return this.num2 + 1
    },
    ... mapState([
      'age'
    ]),
    // mapGetters不改名字的方式
    // ... mapGetters([
      //   'getArr1Length'
    // ])
    // mapGetters改名字的方式
    ... mapGetters({
      getArr1Length11111: 'getArr1Length'
    })
  },
  methods: {
    ... mapMutations([
      // 这样写就相当于methods中有一个olding方法
      'olding'
    ]),
    changeLevel() {
      // 第一个参数是mutation的类型；后面的参数是载荷,如果有多个参数，可以用数组或者对象包起来
      // this.$store.commit('levelUpUp',this.num1)
      // 对象风格的提交方式
      this.$store.commit({
        type: 'levelUpUp',
        data1: this.num1
      })
    }
  }
}
</script>
<style scoped lang="">
</style>